<template>
	<view class="hdList" :style="theme">
		<view v-for="(item, index) in list" :key="index" class="hdli"
			@click="jumps(item)">
			<view class="kuan">
				<image :src="item.showProjectPictures"></image>
			</view>
			<view class="hdWz limit-1-line">
				{{item.projectName}}
			</view>
		</view>
		<view v-if="list.length === 0" class="no-order">
			<image :src="imgHost+'/default_nodata.png'"></image>
			<view>暂无项目～</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				type: 1
			}
		},
		onLoad(ops) {
			this.type = ops.type || 1
			this.getList()
		},
		methods: {
			jump(url, params, a) {
				this.$app.jump(url, params, a);
			},
			jump2(url, params, a) {
				this.$app.jump2(url, params, a);
			},
			jump3(url, params, a) {
				this.$app.jump3(url, params, a);
			},
			jumps(item){
				if(this.type ==2) {
					this.jump3('/pages/venue/fieldArea?id=',item.id+'&name='+item.projectName+'&peerNum='+item.peerNum+'&type='+this.type)
				} else {
					this.jump2('/pages/venue/fieldArea?id=',item.id+'&name='+item.projectName+'&peerNum='+item.peerNum+'&type='+this.type)
				}
			},
			getList() {
				this.$app.ajax({
					data: {
						param: {
							venueId: this.venueId,
							type: "0",
							status: '1'
						}
					},
					api: this.$api.getProject()
				}).then((res) => {
					if (res.errorCode === '000000') {
						this.list = res.recordList || []
					}
				}).catch(() => {})
			}
		}

	}
</script>
<style scoped lang="scss">
	.hdList {
		display: flex;
		flex-wrap: wrap;
		box-sizing: border-box;
		padding: 20rpx 30rpx;

		.hdli {
			width: 22%;
			margin-right: 4%;
			border-radius: 20rpx;
			background-color: #fff;
			height: 190rpx;
			margin-bottom: 20rpx;
			display: flex;
			align-items: center;
			flex-direction: column;
			justify-content: center;
			text-align: center;

			&:nth-child(4n) {
				margin-right: 0;
			}

			.kuan {
				width: 80rpx;
				margin: 0 15rpx;
				display: block;
				height: 80rpx;
				background-color: #fff;
				box-sizing: border-box;
				display: flex;
				justify-content: center;
				align-items: center;

				image {
					width: 50rpx;
					height: 50rpx;
				}
			}

			.hdWz {
				color: #333333;
				margin-top: 20rpx;
			}

			&.on {
				.kuan {
					border: none;
					background-color: $color;
				}

				.hdWz {
					color: $color;
				}
			}
		}

	}
</style>
